<template>
  <el-container >
    <el-header class="auth-header">
      <div class="back">
      <Back class="back-icon" @click="back" />
    </div>
      <div class="header-first">
      <h1 v-for="item,index in match" :key="index">{{ item.title }}</h1>
    </div>
      <div class="user-info">
            <el-card class="icon-card" @click="Itemmanage">
              <EditPen class="header-icon" />
              报名首页
            </el-card>
            <el-card class="icon-card" @click="handleTeamInfo">
              <EditPen class="header-icon" />
              团队信息
            </el-card>
            <el-card class="icon-card" @click="handlePersonnelManage">
              <User class="header-icon" />
              人员管理
            </el-card>
            <el-card class="icon-card" @click="handleSingleSignup">
              <Tools class="header-icon" />
              单练报名
            </el-card>
            <el-card class="icon-card" @click="handleExportInfo">
              <Share class="header-icon" />
              导出信息
            </el-card>
      </div>
    </el-header>
    <router-view :key="$route.fullPath"></router-view>
  </el-container>

</template>

<script setup>
import { useRouter, RouterView, useRoute } from 'vue-router'
import { ref } from 'vue'



const route = useRoute()
const router = useRouter()

const matchString = localStorage.getItem('match');
const match = JSON.parse(matchString);


const id = route.query.id

//跳转到团队信息页面
function handleTeamInfo() {
  router.push({ path: '/home/information', query: { id: id } })
}

//跳转到首页
function Itemmanage() {
  router.push({ path: '/home/homechild' })
}

//跳转到人员管理页面
function handlePersonnelManage() {
  router.push({ path: '/home/personnel' })
}

//跳转到人员添加页面
function handleSingleSignup() {
  router.push({ path: '/home/solopractice' })
}

//跳转到单练报名页面
function handleExportInfo() {
  router.push({ path: '/home/fullinformation' })
}

//退出
const back = () => {
  ElMessageBox.confirm('确认退出比赛报名吗？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      // 用户点击确认
      // 清除 userToken 和 userData
      localStorage.removeItem('userToken');
      localStorage.removeItem('userData');
      
      // 清除其他数据
      localStorage.removeItem('teamid');

      // 重定向到登录页面
      router.push('/login');
      // 这里可以执行退出的逻辑
    })
    .catch(() => {
      // 用户点击取消
    });
};

const activeStep = ref(0);
</script>

<style scoped>
.auth-header {
  height: 150px;
  display: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #2c8fd5;
  color: rgb(255, 255, 255);
  /* line-height: 30px; */
}

.icon-card {
  margin-left: 10px;
  color: white;
  width: 115px;
  font-size: 18px;
  background-color: #8cbfde;
}
.header-first{
  display: flex;
  /* justify-content:space-between; */
}

.user-info {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  margin-left: 20%;
  font-size: 12px;
}

svg {
  color: rgb(255, 255, 255);
  height: 40px;
  margin-top: 48px;
  margin-left: 65px;
}
.back{
  margin-bottom: 3%;
  width: 100px;
  
}
.back-icon {
 margin-left: 6%;
}
h1{
  width: 100%;                      
  font-size: 36px;
}
.header-icon {
  height: 50px;
  margin: 0 5px 0 0;
}
</style>